<template>
  <div
    ref="pieRef"
    style="width: 100%; height: 85%"
    @mouseenter="mouseoveAl"
    @mouseleave="mouseleaveAl"
  ></div>
</template>
      
      <script>
import * as echarts from "echarts";
import { mapState } from "vuex";
import { getThemeValue } from "@/utils/theme_color.js";
export default {
  data() {
    return {
      chartInstance: null,
      loading: null,
      option: {
        color: ["#21ffeb", "#36adff"],
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left",
          },
        },
        legend: {
          bottom: "0%",
          textStyle: {
            color: "rgba(255,255,255,0.8)",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "13%",
          top: "15%",
          containLabel: true,
          itemWidth:10
        },

        xAxis: {
          type: "category",
         
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "rgba(255,255,255,0.5)",
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#1a1f6d",
              width: 1,
            },
          },
          axisLabel: {
            show: true,
            color: "rgba(255,255,255,0.5)",
          },
        },
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
      },
    };
  },
  computed: {
    ...mapState({
      // sideTheme: (state) => state.settings.sideTheme,
    }),
  },
  methods: {
    //划入
    mouseoveAl() {
      clearInterval(this.startInterval);
    },
    //划出
    mouseleaveAl() {
      this.startInterval();
    },
    initChart() {
      // 初始化对象
      this.chartInstance = echarts.init(this.$refs.pieRef);
      this.chartInstance.setOption(this.option, true);
      window.addEventListener("resize", () => {
        this.chartInstance.resize();
      });
      this.startInterval();
    },
    getData(params) {
        this.option.xAxis.data = params.dayArr;
    
      let series = [];
      params.list.forEach((item) => {
        series.push({
          name: item.name,
          type: "line",
          data: item.data,
        });
      });
        this.option.series = series;
  
      this.chartInstance.setOption(this.option, true);
    },
    // 更新图表
    startInterval() {
      if (this.option.series.length > 9) {
        if (this.loading) {
          clearInterval(this.loading);
        }

        this.loading = setInterval(() => {
          if (
            Number(this.option.dataZoom[0].endValue) ===
            this.option.series.length - 1
          ) {
            this.option.dataZoom[0].endValue = 6;
            this.option.dataZoom[0].startValue = 0;
          } else {
            this.option.dataZoom[0].endValue++;
            this.option.dataZoom[0].startValue++;
          }

          this.chartInstance.setOption(this.option);
        }, 3000);
      }
    },
    updateChart() {
      const titleThemeDark = getThemeValue("titleThemeDark");
      const DarkThemeStyle = {
        title: {
          textStyle: {
            color: titleThemeDark.titleColor,
          },
        },
        legend: {
          textStyle: {
            color: titleThemeDark.titleColor,
          },
        },
        xAxis: {
          axisLabel: {
            color: "#617898",
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          axisLabel: {
            color: "#617898",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.15)",
            },
          },
          axisLine: {
            show: false,
          },
        },
      };
      const titleThemeHigh = getThemeValue("titleThemeHigh");
      const HighThemeStyle = {
        title: {
          textStyle: {
            color: titleThemeHigh.titleColor,
          },
        },
        legend: {
          textStyle: {
            color: titleThemeHigh.titleColor,
          },
        },
        xAxis: {
          axisLabel: {
            color: "rgba(0,0,0,0.45)",
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          axisLabel: {
            color: " rgba(0,0,0,0.45)",
          },
          axisLine: {
            show: false,
          },
        },
      };
      // if (this.sideTheme == "theme-dark") {
      //   this.chart.setOption(DarkThemeStyle);
      // } else {
      //   this.chart.setOption(HighThemeStyle);
      // }
    },
  },
  mounted() {
    this.initChart();

    // 添加随页面变化而变化
    window.addEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
    clearInterval(this.loading);
  },
  watch: {
    // sideTheme: {
    //   handler(newValue) {
    //     this.updateChart();
    //   },
    // },
  },
};
</script>
      
      <style lang="scss" scoped>
.visit-app {
  width: 100%;
  height: 100%;
}
</style>
      